<template>
	<view class="details">
		<view class="suc-nav" :style="{ height: sysHeight+'px' }" :class="isShow?'on':''">
			<view class="bottom acea-row row-middle row-center-wrapper">
				<image class="suc-w" src="../../static/images/suc-w.png" mode="aspectFit"></image>
				<text>已保存至本地相册</text>
			</view>
		</view>
		<view class="syspadding navbar">
			<view class="navbarh acea-row row-between-wrapper">
				<view class="acea-row row-middle backbtn" >
					<!-- <image class="back" src="../../static/images/back.png" mode="aspectFit"></image>
					<text style="margin-left: -10rpx;">返回</text> -->
				</view>
				<view class="fs-34">纳税记录详情</view>
				<view class="backbtn" @click="back">
					<text>关闭</text>
				</view>
			</view>
		</view>
		<view style="width: 100%;height: 170rpx;"></view>
		
		<swiper class="swiper" :indicator-dots="false" :autoplay="false" :interval="3000" :duration="1000" @change="change">
			<swiper-item v-for="(item,index) in images" :key="index">
				<view class="swiper-item" @click="previewImage(item)">
					<image :src="item" mode="aspectFit"></image>
				</view>
			</swiper-item>
		</swiper>
		<view class="fs-28 num">
			<text style="color: #4985E8;font-size: 36rpx;">{{ current+1 }}</text>/{{ images.length }}
		</view>
		<view class="add" @click="download">添加到相册</view>
		
		<block v-if="preShow">
			<view class="previewimage acea-row row-middle row-center" @click="close">
				<!-- <view style="width: 100%;height: 220rpx;"></view> -->
				<view class="pictrue">
					<image :src="preImg" mode="widthFix"></image>
				</view>	
			</view>
		</block>

		
	</view>
</template>

<script>
	let sysHeight = uni.getSystemInfoSync().statusBarHeight + 50;
	export default {
		data() {
			return {
				sysHeight:sysHeight,
				isShow:0,
				current:0,
				imageList:[],
				isLoop: false,
				images:[],
				preShow: false,
				id:0,
				
			};
		},
		onLoad(option) {
			this.id = option.id;
			uni.showLoading()
			let obj = option.images.split(',')
			obj.map(item=>{
				this.images.push(item)
			})
			setTimeout(()=>{
				uni.hideLoading()
			},1000)
		},
		methods:{
			close(){
				this.preShow = !this.preShow;
			},
			download() {
				let that = this;
				let list = that.images;
				uni.showLoading();
				for( let i=0;i<list.length;i++ ){
					uni.saveImageToPhotosAlbum({
						filePath: list[i],
						success() {
							setTimeout(()=>{
								uni.hideLoading();
								that.isShow = true;
							},1000)
							setTimeout(()=>{
								that.isShow = false;
							},2000)
						},
						fail(e) {
							uni.hideLoading();
						}
					})
				}
			},
			previewImage(val) {
				this.preImg = val
				this.close();
				// uni.previewImage({
				// 	urls: this.images,
				// 	current: index,
				// 	loop: this.isLoop
				// })
			},
			change(e){
				this.current = e.detail.current;
			},
			back(){
				uni.redirectTo({
					url: '/pages/index/issue-bill?id='+this.id
				})
			}
		}
	}
</script>

<style lang="scss">
	.details{
		
		.previewimage{
			width: 100%;
			height: 100%;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: #000;
			z-index: 20;
			
			.pictrue{
				// width: 100%;
				// height: 1000rpx;
				
				image{
					// width: 100%;
					// height: 100%;
				}
			}
		}
		
		.suc-nav{
			width: 100%;
			background-color: #62C082;
			z-index: 9999;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			color: #ffffff;
			font-size: 34rpx;
			transform: translate3d(0, -100%, 0);
			transition: all .3s cubic-bezier(.25, .5, .5, .9);
			
			&.on{
				transform: translate3d(0, 0, 0);
			}
			
			.bottom{
				position: absolute;
				bottom: 20rpx;
				left: 0;
				right: 0;
				width: 100%;
				
			}
			
			.suc-w{
				width: 40rpx;
				height: 40rpx;
				margin-right: 5rpx;
			}
		}
		
		.add{
			width: 690rpx;
			height: 100rpx;  
			line-height: 100rpx;
			border-radius: 8rpx;
			background-color: #3C89FD;
			color: #ffffff;
			font-size: 34rpx;
			text-align: center;
			margin: 50rpx auto;
			letter-spacing: 4rpx;
		}
		
		.num{
			text-align: center;
		}
		.swiper{
			width: 650rpx;
			height: 900rpx;
			// background-color: #5186E6;
			margin: 30rpx auto;
			
			.swiper-item{
				width: 100%;
				height: 100%;
				
				image{
					width: 100%;
					height: 100%;
				}
			}
		}
		
		.navbar{
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			width: 100vw;
			background-color: #ffffff;
			z-index: 999;
			
			.navbarh{
				width: 100%;
				height: 100rpx;
				padding: 0 30rpx;
				
				.backbtn{
					color: #5186E6;
					width: 150rpx;
					text-align: right;
				}
				.back{
					width: 60rpx;
					height: 60rpx;
					margin-left: -20rpx;
				}
			}
		}
		
		
		
	}
</style>
